<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Agentic AI Performance Dashboard 2025</title>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/3.9.1/chart.min.js"></script>
    <style>
        * {
            margin: 0;
            padding: 0;
            box-sizing: border-box;
        }

        body {
            font-family: 'Arial', sans-serif;
            background: linear-gradient(135deg, #f5f7fa 0%, #c3cfe2 100%);
            color: #333;
            line-height: 1.6;
            padding: 10px;
        }

        .container {
            max-width: 1200px;
            margin: 0 auto;
            padding: 20px;
        }

        .header {
            text-align: center;
            margin-bottom: 30px;
            background: white;
            padding: 25px;
            border-radius: 15px;
            box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
        }

        .header h1 {
            color: #2c3e50;
            font-size: 2.2em;
            margin-bottom: 10px;
        }

        .header p {
            color: #7f8c8d;
            font-size: 1.1em;
        }

        .stats-row {
            display: grid;
            grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
            gap: 20px;
            margin-bottom: 30px;
        }

        .stat-card {
            background: white;
            padding: 20px;
            border-radius: 12px;
            box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
            text-align: center;
            border-left: 4px solid #3498db;
        }

        .stat-number {
            font-size: 2.5em;
            font-weight: bold;
            color: #2980b9;
            margin-bottom: 5px;
        }

        .stat-label {
            color: #7f8c8d;
            font-size: 0.9em;
            text-transform: uppercase;
            letter-spacing: 1px;
        }

        .chart-section {
            display: grid;
            grid-template-columns: repeat(auto-fit, minmax(350px, 1fr));
            gap: 25px;
            margin-bottom: 30px;
        }

        .chart-container {
            background: white;
            padding: 25px;
            border-radius: 15px;
            box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
        }

        .chart-title {
            font-size: 1.3em;
            font-weight: bold;
            color: #2c3e50;
            margin-bottom: 20px;
            text-align: center;
            border-bottom: 2px solid #ecf0f1;
            padding-bottom: 10px;
        }

        .chart-wrapper {
            position: relative;
            height: 300px;
            margin-bottom: 15px;
        }

        .ranking-list {
            background: white;
            padding: 25px;
            border-radius: 15px;
            box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
            margin-bottom: 25px;
        }

        .ranking-item {
            display: flex;
            justify-content: space-between;
            align-items: center;
            padding: 12px 0;
            border-bottom: 1px solid #ecf0f1;
        }

        .ranking-item:last-child {
            border-bottom: none;
        }

        .rank-number {
            background: linear-gradient(45deg, #3498db, #2980b9);
            color: white;
            width: 30px;
            height: 30px;
            border-radius: 50%;
            display: flex;
            align-items: center;
            justify-content: center;
            font-weight: bold;
            font-size: 0.9em;
        }

        .rank-name {
            flex: 1;
            margin-left: 15px;
            font-weight: 500;
            color: #2c3e50;
        }

        .rank-value {
            font-weight: bold;
            color: #27ae60;
            background: #ecf0f1;
            padding: 5px 12px;
            border-radius: 20px;
        }

        .full-width {
            grid-column: 1 / -1;
        }

        .footer {
            text-align: center;
            margin-top: 30px;
            padding: 20px;
            background: white;
            border-radius: 12px;
            color: #7f8c8d;
            box-shadow: 0 2px 6px rgba(0, 0, 0, 0.1);
        }

        @media (max-width: 768px) {
            .container {
                padding: 10px;
            }
            
            .header h1 {
                font-size: 1.8em;
            }
            
            .chart-section {
                grid-template-columns: 1fr;
            }
            
            .chart-wrapper {
                height: 250px;
            }
            
            .stats-row {
                grid-template-columns: 1fr;
            }
        }
    </style>
</head>
<body>
    <div class="container">
        <div class="header">
            <h1>🤖 Agentic AI Performance Dashboard 2025</h1>
            <p>基于Kaggle数据集的AI智能体性能分析报告</p>
        </div>

        <div class="stats-row">
            <div class="stat-card">
                <div class="stat-number">5,000</div>
                <div class="stat-label">实际处理数据记录数</div>
            </div>
            <div class="stat-card">
                <div class="stat-number">16</div>
                <div class="stat-label">智能体类型总数</div>
            </div>
            <div class="stat-card">
                <div class="stat-number">12</div>
                <div class="stat-label">大模型架构总数</div>
            </div>
            <div class="stat-card">
                <div class="stat-number">8</div>
                <div class="stat-label">任务类别总数</div>
            </div>
        </div>

        <div class="chart-section">
            <div class="chart-container">
                <div class="chart-title">智能体类型多模态支持占比Top3</div>
                <div class="chart-wrapper">
                    <canvas id="agentTypeChart"></canvas>
                </div>
            </div>

            <div class="chart-container">
                <div class="chart-title">大模型架构多模态支持占比Top3</div>
                <div class="chart-wrapper">
                    <canvas id="modelArchChart"></canvas>
                </div>
            </div>
        </div>

        <div class="chart-section">
            <div class="chart-container full-width">
                <div class="chart-title">任务类别Bias Detection Score中位数Top3</div>
                <div class="chart-wrapper">
                    <canvas id="biasScoreChart"></canvas>
                </div>
            </div>
        </div>

        <div class="ranking-list">
            <div class="chart-title">📊 详细排名数据</div>
            
            <h3 style="color: #2c3e50; margin: 20px 0 15px 0;">1. 智能体类型多模态支持占比排名</h3>
            <div class="ranking-item">
                <div class="rank-number">1</div>
                <div class="rank-name">Customer Service</div>
                <div class="rank-value">17.06%</div>
            </div>
            <div class="ranking-item">
                <div class="rank-number">2</div>
                <div class="rank-name">Content Creator</div>
                <div class="rank-value">16.88%</div>
            </div>
            <div class="ranking-item">
                <div class="rank-number">3</div>
                <div class="rank-name">Social Media Manager</div>
                <div class="rank-value">16.51%</div>
            </div>

            <h3 style="color: #2c3e50; margin: 30px 0 15px 0;">2. 大模型架构多模态支持占比排名</h3>
            <div class="ranking-item">
                <div class="rank-number">1</div>
                <div class="rank-name">Mixtral-8x7B</div>
                <div class="rank-value">18.33%</div>
            </div>
            <div class="ranking-item">
                <div class="rank-number">2</div>
                <div class="rank-name">Falcon-180B</div>
                <div class="rank-value">15.85%</div>
            </div>
            <div class="ranking-item">
                <div class="rank-number">3</div>
                <div class="rank-name">CodeT5+</div>
                <div class="rank-value">15.42%</div>
            </div>

            <h3 style="color: #2c3e50; margin: 30px 0 15px 0;">3. 任务类别Bias Detection Score中位数排名</h3>
            <div class="ranking-item">
                <div class="rank-number">1</div>
                <div class="rank-name">Creative Writing</div>
                <div class="rank-value">0.7820</div>
            </div>
            <div class="ranking-item">
                <div class="rank-number">2</div>
                <div class="rank-name">Problem Solving</div>
                <div class="rank-value">0.7806</div>
            </div>
            <div class="ranking-item">
                <div class="rank-number">3</div>
                <div class="rank-name">Learning & Adaptation</div>
                <div class="rank-value">0.7780</div>
            </div>
        </div>

        <div class="footer">
            <p>📈 数据来源：Agentic AI Performance Dataset 2025 | 📱 移动端友好设计 | 🎨 浅色调数据看板</p>
            <p style="margin-top: 10px; font-size: 0.9em;">本报告基于实际处理的5000条数据记录生成</p>
        </div>
    </div>

    <script>
        // 配置Chart.js默认样式
        Chart.defaults.font.family = 'Arial, sans-serif';
        Chart.defaults.color = '#2c3e50';

        // 智能体类型多模态支持占比图表
        const agentTypeCtx = document.getElementById('agentTypeChart').getContext('2d');
        new Chart(agentTypeCtx, {
            type: 'doughnut',
            data: {
                labels: ['Customer Service', 'Content Creator', 'Social Media Manager'],
                datasets: [{
                    data: [17.06, 16.88, 16.51],
                    backgroundColor: [
                        'rgba(52, 152, 219, 0.8)',
                        'rgba(46, 204, 113, 0.8)',
                        'rgba(155, 89, 182, 0.8)'
                    ],
                    borderColor: [
                        'rgba(52, 152, 219, 1)',
                        'rgba(46, 204, 113, 1)',
                        'rgba(155, 89, 182, 1)'
                    ],
                    borderWidth: 2
                }]
            },
            options: {
                responsive: true,
                maintainAspectRatio: false,
                plugins: {
                    legend: {
                        position: 'bottom',
                        labels: {
                            padding: 20,
                            usePointStyle: true,
                            font: {
                                size: 12
                            }
                        }
                    },
                    tooltip: {
                        callbacks: {
                            label: function(context) {
                                return context.label + ': ' + context.parsed + '%';
                            }
                        }
                    }
                }
            }
        });

        // 大模型架构多模态支持占比图表
        const modelArchCtx = document.getElementById('modelArchChart').getContext('2d');
        new Chart(modelArchCtx, {
            type: 'bar',
            data: {
                labels: ['Mixtral-8x7B', 'Falcon-180B', 'CodeT5+'],
                datasets: [{
                    label: '多模态支持占比 (%)',
                    data: [18.33, 15.85, 15.42],
                    backgroundColor: [
                        'rgba(231, 76, 60, 0.8)',
                        'rgba(241, 196, 15, 0.8)',
                        'rgba(52, 152, 219, 0.8)'
                    ],
                    borderColor: [
                        'rgba(231, 76, 60, 1)',
                        'rgba(241, 196, 15, 1)',
                        'rgba(52, 152, 219, 1)'
                    ],
                    borderWidth: 2,
                    borderRadius: 8
                }]
            },
            options: {
                responsive: true,
                maintainAspectRatio: false,
                plugins: {
                    legend: {
                        display: false
                    }
                },
                scales: {
                    y: {
                        beginAtZero: true,
                        max: 20,
                        grid: {
                            color: 'rgba(0, 0, 0, 0.1)'
                        },
                        ticks: {
                            callback: function(value) {
                                return value + '%';
                            }
                        }
                    },
                    x: {
                        grid: {
                            display: false
                        }
                    }
                }
            }
        });

        // Bias Detection Score中位数图表
        const biasScoreCtx = document.getElementById('biasScoreChart').getContext('2d');
        new Chart(biasScoreCtx, {
            type: 'line',
            data: {
                labels: ['Creative Writing', 'Problem Solving', 'Learning & Adaptation'],
                datasets: [{
                    label: 'Bias Detection Score 中位数',
                    data: [0.7820, 0.7806, 0.7780],
                    borderColor: 'rgba(46, 204, 113, 1)',
                    backgroundColor: 'rgba(46, 204, 113, 0.1)',
                    borderWidth: 3,
                    fill: true,
                    tension: 0.4,
                    pointBackgroundColor: 'rgba(46, 204, 113, 1)',
                    pointBorderColor: '#fff',
                    pointBorderWidth: 2,
                    pointRadius: 6
                }]
            },
            options: {
                responsive: true,
                maintainAspectRatio: false,
                plugins: {
                    legend: {
                        display: false
                    }
                },
                scales: {
                    y: {
                        beginAtZero: false,
                        min: 0.775,
                        max: 0.785,
                        grid: {
                            color: 'rgba(0, 0, 0, 0.1)'
                        },
                        ticks: {
                            callback: function(value) {
                                return value.toFixed(4);
                            }
                        }
                    },
                    x: {
                        grid: {
                            display: false
                        }
                    }
                }
            }
        });
    </script>
</body>
</html>